import React from 'react';
import PopularPage from '../page/bottom/PopularPage';
import TrendingPage from '../page/bottom/TrendingPage';
import FavoritePage from '../page/bottom/FavoritePage';
import MyPage from '../page/bottom/MyPage';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from '@react-native-vector-icons/ionicons';

const Tab = createBottomTabNavigator();

export default function DynamicTabNavigator() {
  function renderOptions(label, iconName, focusedIconName) {
    return {
      tabBarLabel: label,
      tabBarIcon: ({focused, color, size}) => (
        <Icon
          name={focused ? focusedIconName : iconName}
          size={size}
          color={color}
        />
      ),
    };
  }

  return (
    <Tab.Navigator
      initialRouteName="My"
      screenOptions={{
        headerStyle: {backgroundColor: '#0000cc'},
        headerShown: false,
      }}>
      <Tab.Screen
        name="Popular"
        component={PopularPage}
        options={renderOptions('最热', 'bonfire-outline', 'bonfire-sharp')}
      />
      <Tab.Screen
        name="Trending"
        component={TrendingPage}
        options={renderOptions('趋势', 'analytics-outline', 'analytics-sharp')}
      />
      <Tab.Screen
        name="Favorite"
        component={FavoritePage}
        options={renderOptions('收藏', 'reader-outline', 'reader-sharp')}
      />
      <Tab.Screen
        name="My"
        component={MyPage}
        options={renderOptions('我的', 'people-outline', 'people-sharp')}
      />
    </Tab.Navigator>
  );
}
